<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历组件</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/handlebars.js/4.0.9/handlebars.min.js"></script>
	<script id="dateTime-template" type="text/x-handlebars-template">
		<div class="ui-datepicker-header">
			<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>
			<span class="datepicker-curr-month">{{year}}-{{month}}</span>
			<a href="javascript:;" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>
		</div>
		<div class="ui-datepicker-body">
			<table>
				<thead>
					<tr>
						<th>一</th>
						<th>二</th>
						<th>三</th>
						<th>四</th>
						<th>五</th>
						<th>六</th>
						<th>日</th>
					</tr>
				</thead>
				<tbody>
					{{#each dateArr}}
						{{#sevenOpen @index}}
							<tr>
						{{/sevenOpen}}
							<td>{{{this}}}</td>
						{{#sevenClose @index}}
							</tr>
						{{/sevenClose}}
					{{/each}}
				</tbody>
			</table>
		</div>
	</script>
</head>
<body>
	<div class="ui-datepicker-wrapper">
		<!-- <div class="ui-datepicker-header">
			<a href="" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>
			<span class="datepicker-curr-month">2017-08</span>
			<a href="" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>
		</div>
		<div class="ui-datepicker-body">
			<table>
				<thead>
					<tr>
						<th>一</th>
						<th>二</th>
						<th>三</th>
						<th>四</th>
						<th>五</th>
						<th>六</th>
						<th>日</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>29</td>
						<td>30</td>
						<td>31</td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
					</tr>
					<tr>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td>8</td>
						<td>9</td>
						<td>10</td>
						<td>11</td>
					</tr>
					<tr>
						<td>12</td>
						<td>13</td>
						<td>14</td>
						<td>15</td>
						<td>16</td>
						<td>17</td>
						<td>18</td>
					</tr>
					<tr>
						<td>19</td>
						<td>20</td>
						<td>21</td>
						<td>22</td>
						<td>23</td>
						<td>24</td>
						<td>25</td>
					</tr>
					<tr>
						<td>26</td>
						<td>27</td>
						<td>28</td>
						<td>29</td>
						<td>30</td>
						<td>31</td>
						<td>1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td>8</td>
					</tr>
				</tbody>
			</table>
		</div> -->
	</div>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>